<!--
 * @Author: jingzi 1163478123@qq.com
 * @Date: 2025-04-29 20:25:25
 * @LastEditors: jingzi 1163478123@qq.com
 * @LastEditTime: 2025-09-19 14:43:58
 * @Description: 文件描述
 * Copyright (c) 2025 by ${git_name}, All Rights Reserved.
-->
<template>
  <div class="container">
    <h2>gitlab 跳到 发版页面</h2>
    <button class="btn" @click="goJenkins">跳到发版</button>
    <button class="btn" @click="clearSelectedProject">取消选中项目</button>
    <button class="btn" @click="selectedAllProject">一键多选</button>
    <div>
      <p>projectName：{{ tagData.projectName }}</p>
      <p>tag：{{ tagData.tag }}</p>
      <p>time：{{ tagData.time }}</p>
    </div>
    <div v-if="message" :class="['message', messageType]">
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { gitlabToJenkins } from '../config'

const message = ref('')
const messageType = ref('success')
const tagData = ref({})

const goJenkins = async () => {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
    if (!tab) {
      throw new Error('No active tab found')
    }
    if (!tab.url.includes('192.168.5.143')) {
      throw new Error('当前页面不是gitlab页面')
    }

    if (!tab.url.includes('/tags')) {
      throw new Error('当前页面不是tag页面')
    }

    // 发送消息给content script
    const response = await chrome.tabs.sendMessage(tab.id, { action: 'selectAll' })
    
    if (response.success) {
      message.value = '选择成功！'
      messageType.value = 'success'
      tagData.value = response.data

      // 打开Jenkins页面
      const jenkinsUrl = gitlabToJenkins[response.data.projectName] // 替换为实际的Jenkins URL
      const newTab = await chrome.tabs.create({ url: `${jenkinsUrl}build?delay=0sec` })

      // 等待新页面加载完成后发送消息
      chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
        if (tabId === newTab.id && info.status === 'complete') {
          console.log('新页面加载完成')
          chrome.tabs.onUpdated.removeListener(listener)
          // 向新页面发送获取数据的消息
          chrome.tabs.sendMessage(tabId, { 
            action: 'getStoredData',
            sourceUrl: tab.url
          })
        }
      })
    } else {
      message.value = response.message || '操作失败'
      messageType.value = 'error'
    }
  } catch (error) {
    console.error('Error:', error)
    if (error.message.includes('Could not establish connection')) {
      message.value = '请刷新页面后重试'
    } else {
      message.value = '操作失败：' + error.message
    }
    messageType.value = 'error'
  }
}
const clearSelectedProject = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  const response = await chrome.tabs.sendMessage(tab.id, { action: 'clearCheckProject' })
  if (response.success) {
    message.value = '取消选中项目成功！'
    messageType.value = 'success'
  } else {
    message.value = '取消选中项目失败！'
    messageType.value = 'error'
  }
}
const selectedAllProject = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  const response = await chrome.tabs.sendMessage(tab.id, { action: 'selectedAllProject' })
  if (response.success) {
    message.value = '一键多选成功！'
    messageType.value = 'success'
  } else {
    message.value = '一键多选失败！'
    messageType.value = 'error'
  }
}
</script>

<style scoped>
.container {
  padding: 16px;
}

.btn {
  width: 100%;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 8px 0;
}

.btn:hover {
  background-color: #45a049;
}

.message {
  margin-top: 8px;
  padding: 8px;
  border-radius: 4px;
}

.message.success {
  background-color: #dff0d8;
  color: #3c763d;
}

.message.error {
  background-color: #f2dede;
  color: #a94442;
}
</style> 